/*
 * @Author: ray
 * @Date:   2019-06-03 17:16:52
 * @Last Modified by:   ray
 * @Last Modified time: 2019-06-03 20:16:45
 */

import "./ZenTab.css";

/**
 * @namespace ZenUI_ZenTabs
 * ZenTabs description
 * @param {object} props [description]
 * @example
 //activeindex: the active index to set for default
 //dynamicload: if load content dynamic
 //ZenTabs.Tab title="产品": title of the tab

 <ZenTabs activeindex="2" dynamicload="true" className="test">
     <ZenTabs.Tab title="产品" className="zen_m-r-4">
         内容1
     </ZenTabs.Tab>
     <ZenTabs.Tab title="公司" className="zen_m-r-4">
         内容2
     </ZenTabs.Tab>
     <ZenTabs.Tab title="联系" className="zen_m-r-4">
         内容3
     </ZenTabs.Tab>
     <ZenTabs.Tab title="资讯" className="zen_m-r-4">
         内容4
     </ZenTabs.Tab>
 </ZenTabs>
 */
function ZenTabs(props) {
	const activeIndex = props.activeindex || 0;
	const dynamicLoad = props.dynamicload || false;
	const [ZenTabsConfig, updateZenTabsConfig] = usePartState({
		activeIndex: activeIndex,
		dynamicLoad: dynamicLoad
	});
	function updateConfig(value) {
		updateZenTabsConfig(value);
	}
	return (
		<div {...props} className={"zen_tabs " + props.className}>
			<span />
			<ZenTabs.Title
				tabList={props.children}
				parentState={ZenTabsConfig}
				update={updateConfig}
			/>
			<ZenTabs.Content
				contentList={props.children}
				parentState={ZenTabsConfig}
				update={updateConfig}
			/>
		</div>
	);
}

ZenTabs.Title = function(props) {
	const ZenTabsConfig = props.parentState;
	const updateZenTabsConfig = props.update;
	return (
		<ul className={Uts.sc(["zen_tab-title-wrap zen_ps-re"])}>
			{props.tabList &&
				props.tabList.map(function(child, index) {
					return (
						<li
							className={Uts.sc([
								"zen_tab-title",
								ZenTabsConfig.activeIndex == index
									? "zen_tab-active"
									: "",
								child.props.className
							])}
							onClick={() => {
								updateZenTabsConfig({
									activeIndex: index
								});
							}}
							key={child.props.title}
						>
							{child.props.title}
						</li>
					);
				})}
			<li className="zen_tab-title zen_tabs-active-flag" />
		</ul>
	);
};

ZenTabs.Content = function(props) {
	const ZenTabsConfig = props.parentState;
	const updateZenTabsConfig = props.update;
	return (
		<div className={Uts.sc(["zen_tab-content-wrap"])}>
			{props.contentList &&
				props.contentList.map(function(child, index) {
					if (
						!ZenTabsConfig.dynamicLoad ||
						(ZenTabsConfig.dynamicLoad &&
							ZenTabsConfig.activeIndex == index)
					) {
						return (
							<div
								className={Uts.sc([
									"zen_tab-content",

									ZenTabsConfig.activeIndex == index
										? ""
										: "zen_hide"
								])}
								key={child.props.title}
							>
								{child}
							</div>
						);
					}
				})}
		</div>
	);
};

// ZenTabs.ZenTabsConfig={};

ZenTabs.Tab = function(props) {
	return props.children;
};

export default ZenTabs;
